<template>
  <el-dialog
    width='30%'
    title="基本信息"
    :visible.sync="editUserVisible"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="closeBox"
  >
    <el-form :model="form" :rules="rules" ref="form"  label-width='120px'>
      <el-row type='flex' class='row-bg' justify='start'>
        <el-col :span='18' class='grid-content'>
          <el-form-item label='账号：' prop='username'>
            <el-input size='small' disabled v-model='form.username' autocomplete='off'></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type='flex' class='row-bg' justify='start'>
        <el-col :span='18' class='grid-content'>
          <el-form-item label="姓名：" :label-width="formLabelWidth" prop="name">
            <el-input  size='small' v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- <el-form-item label="头像：" :label-width="formLabelWidth" prop="imgId">
                <el-upload
                    class="avatar-uploader"
                    :action="BASE_PATH + '/system/resource/upload'"
                    :headers="headers"
                    :show-file-list="false"
                    :multiple="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    >
                    <img v-if="form.imgUrl" :src="form.imgUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item> -->

      <el-row type='flex' class='row-bg' justify='start'>
        <el-col :span='18' class='grid-content'>
          <el-form-item
            label='电话号码：'
            prop='phone'
          >
            <el-input size='small'
                      v-model='form.phone'
                      autocomplete='off'
                      :maxlength='11'
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row justify='start' align='middle'>
        <el-col :span='12' class='grid-content'>
          <el-form-item label='性别:' prop='sex'>
            <el-radio-group size='small' v-model='form.sex'>
              <el-radio :label='true'>男</el-radio>
              <el-radio :label='false'>女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row justify='start' align='middle'>
        <el-col :span='13' class='grid-content'>
          <el-form-item label='状态:' prop='enabled'>
            <el-radio-group size='small' v-model='form.enabled'>
              <el-radio :label='true'>启用</el-radio>
              <el-radio :label='false'>禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row justify='start' align='middle'>
        <el-col :span='18' class='grid-content'>
          <el-form-item label='角色:' prop='roleId'>
            <el-radio-group v-model='form.roleId'>
              <el-radio v-for='(item, index) in roles' :key='index' :label='item.id'>{{ item.name }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider></el-divider>

      <el-row justify='end' align='middle'>
        <el-col :span='24'>
          <el-form-item style='float: right'>
            <el-button @click="cancel('form')">取 消</el-button>
            <el-button type='primary' @click="submit('form')">确 定</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>



  </el-dialog>
</template>
<script>
export default {
  computed: {

  },
  data() {
    return {
      formLabelWidth: "120px",
      editUserVisible: true,

      roles: [],

      form: {
        username: "",
        name: "",
        roleId: "",
        imgUrl: "",
        imgId: "",
        phone: "",
        // email: '',
        enabled: true,
        sex: true,
      },
      rules: {
        username: [{ required: true, message: "请填写账号", trigger: "blur" }],
        name: [{ required: true, message: "请填写姓名", trigger: "blur" }],
        phone: [
          { required: true, validator: this.checkPhone, trigger: "blur" },
        ],
        // email:[
        //     { required: true, message: '请填写邮箱地址', trigger: 'blur' },
        //     { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        // ],
        enabled: [{ required: true, message: "请选择是否启用", trigger: "change" },],
        roleId: [{ required: true, message: "请选择角色", trigger: "change" }],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
      },
    };
  },
  props: ['editData'],
  created() {
      this.form = Object.assign({}, this.form, this.editData);
      this.roleList();
  },
  mounted() {},
  methods: {
    closeBox() {
      this.editUserVisible = false;
      this.$ge.$emit("sys-user-close-editUser-finish");
    },
    cancel(formName) {
      this.editUserVisible = false;
      this.$refs[formName].resetFields();
    },
    handleAvatarSuccess(res, file) {
      this.form.imgUrl = URL.createObjectURL(file.raw);
      this.form.imgId = res.data;
    },
    beforeAvatarUpload(file, fileList) {
      //类型（jpg, png）和大小(2M 以内)
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 jpg 或者 png 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }

      return isJPG && isLt2M;
    },
    //查询角色列表
    roleList() {
      this.$get("/sys-role/list")
        .then((result) => {
          if (result.code == 200 && result.data) {
            this.roles = result.data;
          }
        })
        .catch((error) => {
          this.roles = [];
        });
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$WLoading();
          if (this.form.password != this.form.psd1) {
            this.$message.error("两次填写的密码不一致");
            this.$cancelLoading();
            return false;
          }

          var param = {};
          param = Object.assign({}, this.form, param);

          this.$postJson("/user/update", param)
            .then((result) => {
              if (result.code == 200) {
                if(result.data) {
                  this.$message.success(result.msg);
                  //关闭弹框并刷新列表
                  this.closeBox();
                  this.$ge.$emit('sys-user-change-search');
                }else {
                  this.$message.error(result.msg);
                }
              } else this.$message.error(result.msg);
              this.$cancelLoading();
            })
            .catch((error) => {
              //添加用户异常
              this.$message.error("添加失败");
              this.$cancelLoading();
            });
        } else {
          console.log("用户填写有误！");
          return false;
        }
      });
    },
  },
};
</script>

<style lang='scss' scoped>
//.el-form-item__content{
//  text-align: left;
//}
.el-select {
  width: 100%;
}
.vue-treeselect__input {
  border: 0 !important;
}
.el-form-item__content {
  //line-height: 0 !important;
}
/* 上传样式 start */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/* 上传样式 end */
</style>
